<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="ciui/CiUI.css" />
    <script src="ciui/CiUI.js" type="text/javascript"></script>
  	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>    
  	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAtyszdolYTn9pK5seMWq8shRDiIO9i7IdI7xQHaHlQYSVzooxUBQIWChgh9j1TDNMnC-JS6HKJHbbMw" type="text/javascript"></script>
  </head>
  
  <body>
    <style>
  	/*This CSS is for the tab bar and navigation bar*/
      #headerT{
        position:relative;
        left: 0px;
        top: 55px;
        height: 35px;
        background: url(ciui/images/toolbar.png) repeat-x;
      }
      #textT{
        color: white;
        position: relative;
        text-align: center;
        padding: 0;
        top: 25px;
        font-size: 18px;
        font-family: american typewriter;
        text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
        white-space: nowrap;
        left: -190px;
      }
      #map {
        position: absolute;
        top:119px;
      }
    </style>
    <?php
      include('./navbar.html');
    ?>
    <div id='headerT'></div>
    <div id='textT'>Map View</div>
    <div id="map" style="width: 320px; height: 274px"></div>
    
    <script type="text/javascript" charset="utf-8">
      if (GBrowserIsCompatible()) { 

        function createMarker(point,name,html) {
          var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
          return marker;
        }
        // Display the map, with some controls and set the initial location 
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(37.42508419549077, -122.17678785324097),15); 
                
        var point = new GLatLng(37.42508419549077, -122.17678785324097); //Similarly the name and information needs to be obtained from a POST!!!
        var marker = createMarker(point, 'My Dorm', '<div style="width:200px"><form method="post" action="newlist3.php">West Lagunita<br><br>Name this location:<br><input type="text" name="location" value=""><input type="submit" class="button" value="Create"></form></div>')
        map.addOverlay(marker);
        
      } else { // display a warning if the browser was not compatible
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }		
          
    </script>
  </body>
</html>